<script>
import BaseUrl from "@/http/request/BaseUrl";
import TokenAxios from "@/http/request/TokenAxios";
export default {
  data(){
    return{
      timeValue: [],
      addDialogVisible: false,
      deleteTagById:false,
      openUpdateTagsByIds:false,
      selectTags:[],
      // 当前每页显示多少条数据
      pageSize: 5,
      //分页相关数据
      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      tableData: [],
      total: 0,
      keyword: '',
      inputTag:'',
    }
  },
  methods:{
    openUpdateTagsById(tag){
      this.openUpdateTagsByIds=true
      this.editTagId=tag.id
    },
    //修改标签名
    updateTagNameById(){

      let url = BaseUrl.ADMIN_CONTENT+'/admin/tag/update';
      const requestBodys = {
        id:this.editTagId,
        tagName: this.inputTag
      };
      TokenAxios.post(url,requestBodys).then((response) => {
        console.log('1:'+this.inputTag);
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '成功!',
            type: 'success'
          });
          location.reload()
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch((error) => {
        console.log('请求出错:', error);
      });

    },
    //删除标签
    deleteTagsById(tag){
      let message = '此操作将删除标签，是否继续？';
      this.id = tag.id
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete();
      }).catch(() => {
      });
    },
    handleDelete() {
      let url = BaseUrl.ADMIN_CONTENT + '/admin/tag/delete';
      let deleteNote = {
        id: this.id
      }
      TokenAxios.post(url, deleteNote).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '删除成功!',
            type: 'success'
          });
          location.reload()
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch((error) => {
        console.log('请求出错:', error);
      });
    },
    //新增标签
    addNewTagsById(){
      let url = BaseUrl.ADMIN_CONTENT+'/admin/tag/add-new';
      const requestBody = {
        tagName: this.selectTags
      };
      TokenAxios.post(url,requestBody).then((response) => {
        console.log(this.selectTags);
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '成功!',
            type: 'success'
          });
          location.reload()
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch((error) => {
        console.log('请求出错:', error);
      });
    },
    handleChangeTag(value){

      this.selectTags = value;

    },
    search(){
      console.log(this.keyword);
      let page = this.currentPage;
      let url=BaseUrl.ADMIN_CONTENT+'/admin/tag/search?keyword='+this.keyword+'&page='+page;
      console.log(url)
      TokenAxios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log(jsonResult.data)
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          console.log(this.tableData)
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
          this.maxPage = jsonResult.data.maxPage;
        }else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    },
    // 切换分页
    handleCurrentChange(page) {
      if (this.keyword) {
        this.currentPage = page; // 更新当前页码值
        this.search(); // 执行搜索方法
      } else {
        this.$router.replace('?page=' + page);
        this.loadUserList();
      }
    },
    loadUserList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = BaseUrl.ADMIN_CONTENT + '/admin/tag?page=' + page;

      TokenAxios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    }
  },
  mounted() {
    this.loadUserList();
  }
}
</script>

<template>
<div>
  <!--面包屑导航区域-->
  <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;overflow: hidden">
    <el-breadcrumb-item :to="{ path: '/admin/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>标签管理</el-breadcrumb-item>
  </el-breadcrumb>

    <el-row>
      <el-col :span="10"><div>
        <el-input
            style="width: 400px;margin-top: 20px;margin-bottom: 20px"
            placeholder="请输入内容"
            clearable
            v-model="keyword"
        ></el-input>
        <el-button
            slot="append"
            icon="el-icon-search"
            @click="search()"
        ></el-button>

      </div></el-col>
      <el-col :span="10"><div style="margin-top: 20px">
        <span>操作时间:</span>&nbsp;&nbsp;
        <el-date-picker
            v-model="timeValue"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
        </el-date-picker>
        <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            style="margin-left:1rem"
            @click="searchArticles">筛选
        </el-button>
      </div></el-col>

      <el-col :span="4"><div ></div></el-col>
      <el-col :span="4"><div ></div></el-col>
    </el-row>
  <br>
  <el-cow>
    <el-col :span="4"><div>
      <el-button
          type="primary" @click="addDialogVisible = true" size="medium">新增标签
      </el-button>
      <el-dialog
          style="text-align: center"
          title="新增标签"
          width="40%"
          :visible.sync="addDialogVisible"
      >
        <template>
          <a-select mode="tags" style="width: 650px; margin-top: 17px;" placeholder="请输入标签(限制长度为1-12)"
                    @change="handleChangeTag" size="large" v-model="selectTags">
          </a-select>
          <br>
          <el-button
              type="primary" @click="addNewTagsById" size="small" style="margin-top: 20px"
          >确 定</el-button>
        </template>
      </el-dialog>
    </div></el-col>
    <el-col :span="4"><div></div></el-col>
  </el-cow>
  <el-card style="margin-top: 70px">
    <el-table :data="tableData"
              border stripe
              style="margin-bottom: 20px;overflow: hidden">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column
          prop="id"
          label="标签id"
         >
      </el-table-column>
      <!-- 文章标题 -->
      <el-table-column prop="tagName" label="话题" align="center"
                       :show-overflow-tooltip="true"></el-table-column>
      <el-table-column
          prop="clickTimes"
          label="浏览量"
      >
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
      >
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="修改时间"
      ></el-table-column>
      <el-table-column
      prop="tagId"
      label="总计"
      ></el-table-column>
          <el-table-column
              label="操作"
              width="220">
            <template slot-scope="scope">
              <!-- 删除文章按钮 -->
              <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="deleteTagsById(scope.row)"
              ></el-button>
              <el-tooltip
                class="item"
                effect="dark"
                content="修改标签名"
                placement="top"
                enterable
            >
              <el-button
                  type="warning"
                  icon="el-icon-setting"
                  size="mini"
                  @click="openUpdateTagsById(scope.row)"
              ></el-button>

              </el-tooltip>
            </template>
          </el-table-column>
    </el-table>
    <!--分页区域-->
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :hide-on-single-page="true"
        :page-size="pageSize"
        layout="total, prev, pager, next,jumper"
        :total="total"
        background
    >
    </el-pagination>

    <el-dialog
        style="text-align: center"
        title="修改标签"
        width="40%"
        :visible.sync="openUpdateTagsByIds"
    >
      <template>
        <el-input style="width: 650px; margin-top: 17px;" placeholder="请输入标签(限制长度为1-12)"
                  v-model="inputTag" >
        </el-input>
        <br>
        <el-button
            type="primary" @click="updateTagNameById(inputTag)" size="small" style="margin-top: 20px"
        >确 定</el-button>
      </template>
    </el-dialog>

  </el-card>
</div>
</template>

<style scoped>

</style>